<template>
  <div id="nav">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>

    <van-back-top
      style="width: 46px; height: 46px; padding: 8px"
      offset="0"
      right="5vw"
      bottom="20vh"
      @click="state.showBottom = true"
    >
      <template #default>
        <!-- <SvgIcon width="30" height="30" name="help"></SvgIcon> -->
        <img style="width: 100%" src="@/assets/img/customer.jpg" alt="" />
      </template>
    </van-back-top>
    <van-popup
      v-model:show="state.showBottom"
      position="bottom"
      hei
      style="line-height: 70px; box-sizing: border-box"
      :style="{ height: '30%' }"
    >
      <span style="font-size: 16px; font-weight: bold"> 联系客服 </span>
      <van-row
        v-if="$route.meta.customer"
        style="width: 100%; padding: 0 16px"
        align="center"
      >
        <van-col span="19" align="left">
          <span style="font-size: 14px; color: #666"> 电话号码： </span>
          <span style="font-size: 14px; font-weight: 600">13467591012</span>
        </van-col>
        <van-col span="5" align="right">
          <a
            style="float: right"
            href="javascrpit:;"
            @click="callPhone(13467591012)"
          >
            拨打电话
          </a>
        </van-col>
      </van-row>
      <van-row v-else>
        <van-col>
          <span style="font-size: 14px; padding-left: 16px"
            >营养先行，早期康复</span
          >
        </van-col>
      </van-row>
      <div style="padding: 0 16px; width: 100%">
        <van-button
          type="primary"
          size="large"
          style="
            color: #08d781;
            background: #08d781;
            border-radius: 22px;
            border: none;
          "
          @click="state.showBottom = false"
        >
          <span style="font-size: 16px; color: #fff"> 关闭 </span>
        </van-button>
      </div>
    </van-popup>
    <van-tabbar
      v-if="state.tabbarShow"
      v-model="state.navActive"
      active-color="#08D781"
      @change="onChange"
    >
      <van-tabbar-item icon="wap-home-o"> 服务 </van-tabbar-item>
      <van-tabbar-item>
        <van-row>
          <SvgIcon
            width="30"
            height="30"
            name="educationRecords"
            :color="{ '#08d781': state.navActive == 1 }"
          ></SvgIcon>
        </van-row>
        宣教
      </van-tabbar-item>
      <van-tabbar-item icon="notes-o"> 历史订单 </van-tabbar-item>
    </van-tabbar>
    <!-- <PhoneCode
      v-if="state.tokenFlag"
      :jumpPath="state.jumpPath"
      @confirm="phoneCodeConfirm"
      :tabbarPath="2"
    ></PhoneCode> -->
  </div>
</template>
<script setup>
import { reactive, watch, onActivated } from "vue";
import { useRouter, useRoute } from "vue-router";
import { setStorage, getStorage } from "@/utils/common";
import { siteTitle, tabbarList } from "@/settings";
import PhoneCode from "@/components/popUp/phoneCode.vue";
const router = useRouter();
const route = useRoute();
const state = reactive({
  maskType: 0,
  tokenFlag: false,
  showBottom: false,
  navActive: parseInt(getStorage(`${siteTitle}_tabarRouter`)) || 0,
  jumpPath: 0,
  tabbarShow: true,
  token: getStorage(`${siteTitle}_token`),
});

watch(
  () => route,
  () => {
    if (tabbarList.indexOf(location.pathname) !== -1) {
      if (location.pathname == "/home") {
        state.navActive = 0;
        setStorage(`${siteTitle}_tabarRouter`, 0);
      } else if (location.pathname == "/historicalOrders") {
        state.navActive = 2;
        setStorage(`${siteTitle}_tabarRouter`, 2);
      } else if (location.pathname == "/educationList") {
        state.navActive = 1;
        setStorage(`${siteTitle}_tabarRouter`, 1);
      }
      state.tabbarShow = true;
    } else {
      state.tabbarShow = false;
    }
  },
  {
    deep: true,
  }
);

const phoneCodeConfirm = (data) => {
  state.tokenFlag = false;
  console.log(data);
  state.navActive = data;
};

// 客服弹层
const callPhone = (phoneNumber) => {
  window.location.href = "tel://" + phoneNumber;
};
const onChange = (val) => {
  if (state.token) {
    state.navActive = val;
    setStorage(`${siteTitle}_tabarRouter`, val);
    if (val == 2) {
      router.push({ name: "historicalOrders" });
    } else if (val == 1) {
      router.push({ name: "educationList" });
    } else if (val == 0) {
      router.push({ path: "/" });
    }
  } else {
    state.navActive = 0;
    state.tokenFlag = true;
    if (val == 2) {
      state.jumpPath = `/historicalOrders`;
    }
  }
};

!(function (t) {
  function e() {
    var e = this || self;
    (e.globalThis = e), delete t.prototype._T_;
  }
  "object" != typeof globalThis &&
    (this
      ? e()
      : (t.defineProperty(t.prototype, "_T_", {
          configurable: !0,
          get: e,
        }),
        _T_));
})(Object);
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh;
  width: 100%;
}
html {
  background: #fff !important;
}
#nprogress .bar {
  background: #0d84ff !important;
  height: 3px;
}

.van-popup {
  & * {
    box-sizing: border-box;
  }
}
.van-back-top {
  opacity: 0.8;
  background: #e95e59 !important;
  box-sizing: border-box;
}
.van-tabbar {
  padding: 10px 0 !important;
  .van-icon {
    font-size: 28px;
  }
}
.active-text {
  color: rgb(8, 215, 129);
}
</style>
